<template>
  <div class="app-container">
    <div style="margin-bottom: 55px;">
      <el-row>
        <el-card shadow="never">
          <el-row style="display: flex; align-items: center;">
            <el-col :span="2">
              <el-button style="fpadding: 3px 0" type="text" icon="el-icon-arrow-left" size="small">返回</el-button>
            </el-col>
            <el-col :span="20">
                  <el-tag type="success" effect="dark" style="margin-right: 20px">{{detailForm.invoiceTypeName}}</el-tag>
                  <strong>{{detailForm.invoiceNo}}</strong>
                  <el-divider direction="vertical"></el-divider>
                  <span>时间：{{detailForm.invoiceDate}}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>单据状态: </span>
                  <el-link type="success" :underline="false"><i class="el-icon-circle-check"></i>{{detailForm.accountStatusName}}</el-link>
                  <el-divider direction="vertical"></el-divider>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="float: right" size="small" @click="handleOpenInvoice">查看发票</el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
      <el-row style="padding-top: 10px" class="v-deep">
        <el-col :span="24" :xs="24">
          <el-collapse v-model="activeNames2">
            <el-collapse-item name="1">
              <template slot="title">
                <div>主体信息</div>
              </template>
              <div style="padding: 5px">
                <el-form label-position="top" label-width="80px" size="mini">
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="发票类型">
                        <el-input v-model="detailForm.invoiceTypeName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="发票号码">
                        <el-input v-model="detailForm.invoiceNo" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="发票代码">
                        <el-input v-model="detailForm.invoiceCode" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="开票日期">
                        <el-input v-model="detailForm.invoiceDate" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="印刷序号">
                        <el-input v-model="detailForm.printNumber" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="金额(不含税)">
                        <el-input v-model="detailForm.feeWithoutTax" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="金额(含税)">
                        <el-input v-model="detailForm.fee" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="税额">
                        <el-input v-model="detailForm.tax" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="销方名称">
                        <el-input v-model="detailForm.sellerName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="销方纳税识别号">
                        <el-input v-model="detailForm.sellerNumber" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="乘车行程">
                        <el-input v-model="detailForm.sellerDest" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="销方地址">
                        <el-input v-model="detailForm.sellerAddress" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="销方电话">
                        <el-input v-model="detailForm.sellerTel" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="销方开户行">
                        <el-input v-model="detailForm.sellerBank" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="销方账号">
                        <el-input v-model="detailForm.sellerAccount" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="名称">
                        <el-input v-model="detailForm.buyerName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="名称">
                        <el-input v-model="detailForm.name" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="纳税识别号">
                        <el-input v-model="detailForm.buyerNumber" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="地址">
                        <el-input v-model="detailForm.buyerAddress" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="电话">
                        <el-input v-model="detailForm.buyerTel" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="开户行">
                        <el-input v-model="detailForm.buyerBank" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="账号">
                        <el-input v-model="detailForm.buyerAccount" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="凭证号">
                        <el-input v-model="detailForm.voucherNumber" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="入账日期">
                        <el-input v-model="detailForm.accountDate" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="入账状态">
                        <el-input v-model="detailForm.accountStatusName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="处理状态">
                        <el-input v-model="detailForm.processStatusName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="发票状态">
                        <el-input v-model="detailForm.invoiceStatusName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="查验状态">
                        <el-input v-model="detailForm.checkStatusName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="采集状态">
                        <el-input v-model="detailForm.collectStatusName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="签收状态">
                        <el-input v-model="detailForm.signStatusName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="匹配状态">
                        <el-input v-model="detailForm.matchStatusName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="报销状态">
                        <el-input v-model="detailForm.submitStatusName" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="10">
                    <el-col :span="6">
                      <el-form-item label="校验码">
                        <el-input v-model="detailForm.checkCode" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="6">
                      <el-form-item label="ERP发票流水号">
                        <el-input v-model="detailForm.erpSerialNumber" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="发票备注">
                        <el-input v-model="detailForm.invoiceRemark" disabled="disabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>

                </el-form>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row style="padding-top: 10px" class="v-deep">
        <el-col :span="24" :xs="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1" >
              <template slot="title">
                <div>商品信息</div>
              </template>
              <div style="padding: 5px" class="low-height-th-table">
                <el-table
                  border
                  stripe
                  default-expand-all
                  ref="tableRef"
                  v-loading="loading"
                  :data="invoiceEntryList"
                  :header-cell-style= "{
                    'font-size': '12px !important',
                    'font-weight': '500 !important',
                    'color':'#FFF',
                    'padding': '0px 0',
                    'background-color':'rgb(51 112 255 / 80%)',
                    textAlign: 'left',
                    'height': '30px !important'
                  }"
                  :cell-style="{ padding: '8px 10px 8px 0', textAlign: 'left' }"
                  highlight-current-row style="width: 100%;"
                  height="300px"
                >
                  <el-table-column label="序号" align="center" prop="index" width="50">
                    <template slot-scope="scope">{{scope.$index+1}}</template>
                  </el-table-column>
                  <el-table-column label="项目名称" align="left" prop="itemName" />
                  <el-table-column label="规格型号" align="left" prop="invoiceCode" />
                  <el-table-column label="单位" align="left" prop="unit" />
                  <el-table-column label="数量" align="left" prop="qty" />
                  <el-table-column label="单价(不含税)" align="left" prop="withoutPrice" v-if="isWithout!='含税'"/>
                  <el-table-column label="金额(不含税)" align="left" prop="withoutAmount" v-if="isWithout!='含税'" />
                  <el-table-column label="单价(含税)" align="left" prop="price" v-if="isWithout=='含税'" />
                  <el-table-column label="金额(含税)" align="left" prop="amount" v-if="isWithout=='含税'" />
                  <el-table-column label="税率" align="left" prop="taxRate" />
                  <el-table-column label="税额" align="left" prop="tax" />
                  <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                    </template>
                  </el-table-column>
                  <div slot="empty">
                    <svg-icon icon-class="search-none" style="font-size: 64px;" />
                    <p>暂无数据</p>
                  </div>
                </el-table>
                <div>
                  <div style="margin-top: 5px;margin-bottom: 5px;float: right;">
                    <el-radio-group v-model="isWithout" size="mini">
                      <el-radio-button label="含税"></el-radio-button>
                      <el-radio-button label="不含税"></el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </div>
    <div style="position: fixed;z-index: 999;bottom: 0px;width: 100%;margin-top: 16px;box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 12px 4px;">
      <div style="display: flex;height: 56px;background-color: #FFFF;">
        <div style="width: 100px;padding: 15px 28px;background-color: #3370ff;color: #FFF;font-size: 20px;font-weight: 600;">
          <span>合计</span>
        </div>
        <div style="display: flex;flex-grow: 1;align-items: center;">
          <div style="width: 300px;padding: 0 15px;">
            <svg-icon icon-class="without-tax2" style="color: rgb(255, 88, 88);    font-size: 18px;"/> 金额(不含税)
            <span style="font-weight: 800; margin-left: 5px">
              ¥{{detailForm.feeWithoutTax | formatCurrency}}
            </span>
          </div>
          <div style="width: 300px;padding: 0 15px;">
            <svg-icon icon-class="with-tax2" style="color: rgb(255, 165, 71);    font-size: 18px;"/>  金额(含税)
            <span style="font-weight: 800; margin-left: 5px">
              ¥{{detailForm.fee | formatCurrency}}
            </span>
          </div>
          <div style="width: 300px;padding: 0 15px;">
            <svg-icon icon-class="tax"style="color: rgb(41, 180, 240);    font-size: 18px;" />  税额
            <span style="font-weight: 800; margin-left: 5px">
              ¥{{detailForm.tax | formatCurrency}}
            </span>
          </div>
          <div style="width: 250px; padding: 0 15px;">
            <el-button @click="preInvoice(detailForm.invoiceId)">上一张</el-button>
            <el-button @click="nextInvoice(detailForm.invoiceId)" type="primary">下一张</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 查看发票 -->
    <el-dialog v-dialogDrag  :close-on-click-modal="false" title="查看发票" :visible.sync="invoiceOpen" width="1400px" append-to-body>
      <div class="dialog_box" style="height:580px;">
        <el-row>
            <el-col :span="10">
              <div style="height:575px; overflow-y: auto">
                <el-tabs type="border-card">
                <el-tab-pane label="发票信息">
                  <el-descriptions class="margin-top" title="基本信息" :column="2" size="small" border>
                    <template slot="title">
                      <div>基本信息 <span class="invoice-type">{{detailForm.invoiceTypeName}}</span></div>
                    </template>
                    <el-descriptions-item>
                      <template slot="label">
                        发票代码:
                      </template>
                      011002100113
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        发票号码:
                      </template>
                      04676496
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        开票日期:
                      </template>
                      2023-12-12
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        金额(不含税):
                      </template>
                      ¥394.34
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        税额:
                      </template>
                      ¥23.66
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        金额(含税):
                      </template>
                      ¥418
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        校验码:
                      </template>
                      00825700862314111697
                    </el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions class="margin-top" title="抬头信息" :column="1" size="small" border>
                    <template slot="extra">
                      <el-radio-group v-model="isWithout" size="mini">
                        <el-radio-button label="销方"></el-radio-button>
                        <el-radio-button label="购方"></el-radio-button>
                      </el-radio-group>
                    </template>
                    <el-descriptions-item>
                      <template slot="label">
                        名称:
                      </template>
                      北京中健云康供应链科技有限公司
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        纳税识别号:
                      </template>
                      91110400MA020G766F
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        地址、电话:
                      </template>
                      北京市大兴区礼贤镇元平北路1号自贸试验区大兴机场片区自贸创新服务中心E10栋三层0282号 13521228583北京市大兴区礼贤镇元平北路1号自贸试验区大兴机场片区自贸创新服务中心E10栋三层0282号 13521228583
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        开户行及账号:
                      </template>
                      中国建设银行股份有限公司广州粤电支行 44050138220100001803
                    </el-descriptions-item>
                  </el-descriptions>
                  <el-descriptions class="margin-top" title="商品明细" :column="1" size="small" border >
                    <template slot="extra">
                      <el-radio-group v-model="isWithout" size="mini">
                        <el-radio-button label="含税"></el-radio-button>
                        <el-radio-button label="不含税"></el-radio-button>
                      </el-radio-group>
                    </template>
                    <el-descriptions-item>
                      <el-table
                        border
                        stripe
                        default-expand-all
                        ref="invoiceDetailEntry"
                        v-loading="loading"
                        :data="invoiceEntryList"
                        :header-cell-style= "{
                          'font-size': '12px !important',
                          'font-weight': '500 !important',
                          'color':'#FFF',
                          'padding': '0px 0',
                          'background-color':'rgb(51 112 255 / 80%)',
                          textAlign: 'left',
                          'height': '30px !important'
                        }"
                        :cell-style="{ padding: '8px 10px 8px 0', textAlign: 'left' }"
                        highlight-current-row
                        style="width: 555px;margin-left: -32px;margin-top: -10px;"
                        height="300px"
                      >
                        <el-table-column label="序号" align="center" prop="index" width="50">
                          <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column label="项目名称" align="left" prop="itemName" width="120" show-overflow-tooltip/>
                        <el-table-column label="规格型号" align="left" prop="invoiceCode" width="140" show-overflow-tooltip/>
                        <el-table-column label="单位" align="left" prop="unit"  show-overflow-tooltip/>
                        <el-table-column label="数量" align="left" prop="qty"  show-overflow-tooltip/>
                        <el-table-column label="单价(不含税)" align="left" prop="withoutPrice" width="120" v-if="isWithout!='含税'" show-overflow-tooltip/>
                        <el-table-column label="金额(不含税)" align="left" prop="withoutAmount" width="120" v-if="isWithout!='含税'"  show-overflow-tooltip/>
                        <el-table-column label="单价(含税)" align="left" prop="price" width="120" v-if="isWithout=='含税'"  show-overflow-tooltip/>
                        <el-table-column label="金额(含税)" align="left" prop="amount" width="120" v-if="isWithout=='含税'"  show-overflow-tooltip/>
                        <el-table-column label="税率" align="left" prop="taxRate"  show-overflow-tooltip/>
                        <el-table-column label="税额" align="left" prop="tax"  show-overflow-tooltip/>
                        <div slot="empty">
                          <svg-icon icon-class="search-none" style="font-size: 64px;" />
                          <p>暂无数据</p>
                        </div>
                      </el-table>
                    </el-descriptions-item>

                  </el-descriptions>
                </el-tab-pane>
              </el-tabs>
              </div>
            </el-col>
            <el-col :span="14">
              <div style="height: 575px; background-color:#404040;">
                <div v-viewer style="visibility: hidden;height:575px">
                  <img v-for="src in images" :key="src" :src="src" :data-source="src">
                </div>

              </div>
            </el-col>
        </el-row>
      </div>
    </el-dialog>


  </div>

</template>
<style lang="scss">
  .input_num .el-input__inner{
    padding: 0 0 0 15px !important;
    color: red;
    font-weight: 700;
  }
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-card__body, .el-main {
    padding: 5px 20px !important;
  }

  .collapse-title{
    background-color: red;
  }
  .el-collapse-item__header.is-active {
    border-bottom: 1px solid #f0f2f5 !important;
  }
  .el-collapse-item__header::before{
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    position: absolute;
    background-color: #297cf0;
    left: 0px;
    top: 35px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .el-collapse-item__header div{
    margin-left: 10px;
  }
  .el-form-item__label{
    margin-bottom: -12px;
  }

  .v-deep{
    .el-collapse-item__arrow {
      width: 40px;
    }
    .el-icon-arrow-right:before {
      content: "展开";
      font-size: 14px;
      font-family: 'heiti';
      color: #2295ff;
    }
    .el-collapse-item__arrow.is-active {
      transform: none;
    }
    .el-collapse-item__arrow.is-active::before {
      content: "收起";
      font-size: 14px;
      font-family: 'heiti';
      color: #2295ff;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 8px;
    }
  }

  .el-descriptions__header{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px !important;
    margin-top: 5px;
  }
  .el-descriptions__title::before{
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    position: absolute;
    background-color: #297cf0;
    left: 0px;
    margin-top: 11px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .invoice-type {
    font-size: 12px;
    font-weight: 500;
    border: 2px solid;
    padding: 2px 6px;
    color: hsl(158deg 86% 34%);
    border-radius: 4px;
  }
  .invoice-type::before,
  .invoice-type::after {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border: 2px solid hsl(158deg 86% 34%);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    margin-top: 10px;
  }

  .invoice-type::before {
    margin-left: -10px;
    transform: rotate(45deg);
  }

  .invoice-type::after {
    margin-left: 3px;
    transform: rotate(-135deg);
  }

</style>

<script>
    import { listInvoice, getInvoice, getNextInvoice, getPreInvoice, updateInvoice } from "@/api/doc/ininvoice";

    import Viewer from 'v-viewer';


    export default {
        name: "InInvoiceDetail",
        data() {
            return {
                activeNames: ['1'],
                activeNames2: ['1'],
                detailForm:{},
                loading:false,
                invoiceEntryList:[],
                isWithout:'含税',
                invoiceOpen:false,
                images:['', 'https://picsum.photos/300/200'],
                options:{
                    zIndex: 99999,
                    inline: true,
                    button: true,
                    navbar: true,
                    title: true,
                    toolbar: true,
                    tooltip: true,
                    movable: true,
                    zoomable: true,
                    rotatable: true,
                    scalable: true,
                    transition: true,
                    fullscreen: false,
                    keyboard: true,
                    url: 'data-source'
                }
            };
        },
        created() {
            // 获取发票ID
            let invoiceId = this.$route.params && this.$route.query.invoiceId;
            console.log("获取发票ID：" + invoiceId);
            this.init(invoiceId);
        },
        methods: {
            init(invoiceId){
                this.$modal.loading("正在初始化，请稍候...");
                getInvoice(invoiceId).then(response => {
                    this.detailForm = response.data;
                    this.invoiceEntryList = response.data.tinInvoiceEntryList;
                    this.$modal.closeLoading();
                });
            },

            handleOpenInvoice() {
                this.invoiceOpen = true;
                // TODO 获取附件

            },

            nextInvoice(invoiceId){
                this.$modal.loading("正在初始化，请稍候...");
                getNextInvoice(invoiceId).then(response => {
                    if(response.data){
                        this.detailForm = response.data;
                        this.invoiceEntryList = response.data.tinInvoiceEntryList;
                    } else {
                        this.$modal.msgWarning("没有下一个票据");
                    }
                    this.$modal.closeLoading();
                });
            },

            preInvoice(invoiceId){
                this.$modal.loading("正在初始化，请稍候...");
                getPreInvoice(invoiceId).then(response => {
                    if(response.data){
                        this.detailForm = response.data;
                        this.invoiceEntryList = response.data.tinInvoiceEntryList;
                    } else {
                        this.$modal.msgWarning("没有上一个票据");
                    }
                    this.$modal.closeLoading();
                });
            },
        }
    }
</script>
